<template>
	<div class="wrapper">
		<!-- header部分 -->
		<header>
			<p>冻结详情</p>
		</header>

		<!-- 冻结信息 -->
		<div class="freeze-info">
			<div class="info-header">
				<i class="fa fa-snowflake-o"></i>
				<h3>{{ transactionData.transactionType === 'FREEZE' ? '资金冻结中' : '资金已解冻' }}</h3>
			</div>

			<div class="freeze-details">
				<div class="detail-item">
					<span>冻结金额:</span>
					<span class="amount">{{ Math.abs(transactionData.amount || 0).toFixed(2) }}元</span>
				</div>
				<div class="detail-item">
					<span>交易时间:</span>
					<span>{{ formatDateTime(transactionData.transactionTime) }}</span>
				</div>
				<div class="detail-item">
					<span>冻结原因:</span>
					<span>{{ freezeReason }}</span>
				</div>
				<div class="detail-item" v-if="transactionData.remark">
					<span>备注信息:</span>
					<span>{{ transactionData.remark }}</span>
				</div>
			</div>
		</div>

		<!-- 解冻条件说明 -->
		<div class="unfreeze-conditions" v-if="transactionData.transactionType === 'FREEZE'">
			<h3>解冻条件</h3>
			<div class="conditions-list">
				<div class="condition-item">
					<i class="fa fa-check-circle"></i>
					<span>等待买家确认收货</span>
				</div>
				<div class="condition-item">
					<i class="fa fa-clock-o"></i>
					<span>确认收货后资金自动解冻</span>
				</div>
				<div class="condition-item">
					<i class="fa fa-info-circle"></i>
					<span>解冻后资金将进入商家可用余额</span>
				</div>
			</div>
		</div>

		<!-- 关联订单信息 -->
		<div class="order-info" v-if="transactionData.order">
			<h3>关联订单</h3>
			<div class="order-card" @click="goToOrderDetail">
				<div class="order-header">
					<span class="order-id">订单号: {{ transactionData.order.id }}</span>
					<span class="order-status">{{ getOrderStatusText(transactionData.order.orderState) }}</span>
				</div>
				<div class="order-content">
					<div class="business-info">
						<i class="fa fa-shopping-bag"></i>
						<span>{{ transactionData.order.business?.businessName || '未知商家' }}</span>
					</div>
					<div class="order-amount">
						<span>订单金额: ¥{{ transactionData.order.orderTotal?.toFixed(2) || '0.00' }}</span>
					</div>
				</div>
				<div class="order-time">
					<span>下单时间: {{ formatDateTime(transactionData.order.orderDate) }}</span>
				</div>
				<div class="view-order">
					<span>点击查看订单详情</span>
					<i class="fa fa-chevron-right"></i>
				</div>
			</div>
		</div>

		<!-- 解冻记录 -->
		<div class="unfreeze-record" v-if="transactionData.transactionType === 'UNFREEZE'">
			<h3>解冻记录</h3>
			<div class="record-info">
				<div class="record-item">
					<i class="fa fa-unlock"></i>
					<span>资金已于 {{ formatDateTime(transactionData.transactionTime) }} 解冻</span>
				</div>
				<div class="record-item">
					<i class="fa fa-check"></i>
					<span>解冻金额: ¥{{ Math.abs(transactionData.amount || 0).toFixed(2) }}</span>
				</div>
				<div class="record-item">
					<i class="fa fa-info"></i>
					<span>资金已进入商家可用余额</span>
				</div>
			</div>
		</div>

		<!-- 操作按钮 -->
		<div class="action-buttons">
			<button class="back-btn" @click="goBack">返回交易流水</button>
			<button v-if="canConfirmReceipt" class="confirm-btn" @click="confirmReceipt" :disabled="isProcessing">
				<span v-if="isProcessing">处理中...</span>
				<span v-else>确认收货并解冻</span>
			</button>
		</div>

		<!-- 加载状态 -->
		<div v-if="isLoading" class="loading">
			<p>加载中...</p>
		</div>

		<!-- 错误提示 -->
		<div v-if="errorMsg" class="error-msg">
			<p>{{ errorMsg }}</p>
			<button @click="loadTransactionDetail">重试</button>
		</div>

		<!-- 底部菜单 -->
		<Footer></Footer>
	</div>
</template>

<script>
import Footer from '../components/Footer.vue';
import axios from 'axios';

export default {
	name: 'WalletFreezeDetail',
	components: {
		Footer
	},
	data() {
		return {
			transactionId: this.$route.query.transactionId,
			transactionData: {},
			isLoading: false,
			isProcessing: false,
			errorMsg: ''
		};
	},
	computed: {
		freezeReason() {
			if (!this.transactionData.order) return '系统冻结';

			const orderState = this.transactionData.order.orderState;
			switch (orderState) {
				case 0: return '订单待确认';
				case 1: return '订单进行中，等待确认收货';
				case 2: return '订单已完成';
				case 3: return '订单已取消';
				default: return '订单处理中';
			}
		},
		canConfirmReceipt() {
			// 只有当交易类型为FREEZE且用户是买家时才能确认收货
			return this.transactionData.transactionType === 'FREEZE' &&
				   this.transactionData.order &&
				   (this.transactionData.order.orderState === 1); // 假设状态1表示配送中
		}
	},
	methods: {
		async loadTransactionDetail() {
			if (!this.transactionId) {
				this.errorMsg = '交易ID缺失';
				return;
			}

			this.isLoading = true;
			this.errorMsg = '';
			try {
				const token = localStorage.getItem('id_token');
				if (!token) {
					this.$router.push('/login');
					return;
				}

				// 这里应该调用具体的交易详情接口
				// 由于后端API文档中没有单独的交易详情接口，我们通过交易流水接口获取
				const response = await axios.get('wallet/transactions', {
					headers: {
						'Authorization': `Bearer ${token}`
					}
				});

				if (response.data.success && (response.data.code === 200 || response.data.code === 0)) {
					const transactions = response.data.data || [];
					const transaction = transactions.find(t => t.id == this.transactionId);

					if (transaction) {
						this.transactionData = transaction;
					} else {
						this.errorMsg = '未找到交易记录';
					}
				} else {
					this.errorMsg = response.data.message || '获取交易详情失败';
				}
			} catch (error) {
				this.errorMsg = '网络错误，请重试';
			} finally {
				this.isLoading = false;
			}
		},
		async confirmReceipt() {
			if (!this.transactionData.order) return;

			this.isProcessing = true;
			this.errorMsg = '';

			try {
				const token = localStorage.getItem('id_token');
				if (!token) {
					this.$router.push('/login');
					return;
				}

				// 调用确认收货接口
				const response = await axios.post('wallet/confirm-order', null, {
					headers: {
						'Authorization': `Bearer ${token}`
					},
					params: {
						orderId: this.transactionData.order.id
					},
					timeout: 10000
				});

				if (response.data.success && (response.data.code === 200 || response.data.code === 0)) {
					// 确认收货成功，刷新详情
					alert('确认收货成功，资金已解冻！');
					await this.loadTransactionDetail();
				} else {
					this.errorMsg = response.data.message || '确认收货失败';
				}
			} catch (error) {
				this.errorMsg = '网络错误，请重试';
			} finally {
				this.isProcessing = false;
			}
		},
		getOrderStatusText(status) {
			const statusMap = {
				0: '待支付',
				1: '配送中',
				2: '已完成',
				3: '已取消'
			};
			return statusMap[status] || '未知状态';
		},
		formatDateTime(dateTime) {
			if (!dateTime) return '';
			const date = new Date(dateTime);
			return date.toLocaleString('zh-CN', {
				year: 'numeric',
				month: '2-digit',
				day: '2-digit',
				hour: '2-digit',
				minute: '2-digit'
			});
		},
		goToOrderDetail() {
			if (this.transactionData.order) {
				// 跳转到订单详情页
				this.$router.push({
					path: '/orderList', // 或者根据实际订单详情页面路由调整
					query: { orderId: this.transactionData.order.id }
				});
			}
		},
		goBack() {
			this.$router.push('/walletTransactions');
		}
	},
	mounted() {
		this.loadTransactionDetail();
	}
};
</script>

<style scoped>
.wrapper {
	padding-bottom: 60px;
	min-height: 100vh;
	background-color: #f5f5f5;
}

header {
	background-color: #0097ff;
	color: #fff;
	padding: 4vw;
	text-align: center;
}

header p {
	margin: 0;
	font-size: 4.5vw;
	font-weight: 500;
}

/* 冻结信息 */
.freeze-info {
	background-color: #fff;
	margin: 3vw;
	border-radius: 2vw;
	padding: 4vw;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.info-header {
	display: flex;
	align-items: center;
	margin-bottom: 3vw;
}

.info-header i {
	font-size: 6vw;
	color: #0097ff;
	margin-right: 2vw;
}

.info-header h3 {
	margin: 0;
	font-size: 4.5vw;
	color: #333;
	font-weight: 500;
}

.freeze-details {
	border: 1px solid #f0f0f0;
	border-radius: 1vw;
	padding: 3vw;
}

.detail-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 2vw;
	font-size: 3.5vw;
	color: #666;
}

.detail-item:last-child {
	margin-bottom: 0;
}

.amount {
	color: #ff4d4f;
	font-weight: bold;
	font-size: 4vw;
}

/* 解冻条件说明 */
.unfreeze-conditions {
	background-color: #fff;
	margin: 3vw;
	border-radius: 2vw;
	padding: 4vw;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.unfreeze-conditions h3 {
	margin: 0 0 3vw 0;
	font-size: 4vw;
	color: #333;
	font-weight: 500;
}

.conditions-list {
	border: 1px solid #f0f0f0;
	border-radius: 1vw;
	padding: 3vw;
}

.condition-item {
	display: flex;
	align-items: center;
	margin-bottom: 2vw;
	font-size: 3.5vw;
	color: #666;
}

.condition-item:last-child {
	margin-bottom: 0;
}

.condition-item i {
	margin-right: 2vw;
	font-size: 4vw;
	color: #0097ff;
}

/* 关联订单信息 */
.order-info {
	background-color: #fff;
	margin: 3vw;
	border-radius: 2vw;
	padding: 4vw;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.order-info h3 {
	margin: 0 0 3vw 0;
	font-size: 4vw;
	color: #333;
	font-weight: 500;
}

.order-card {
	border: 1px solid #f0f0f0;
	border-radius: 1vw;
	padding: 3vw;
	cursor: pointer;
	transition: all 0.3s;
}

.order-card:hover {
	border-color: #0097ff;
	background-color: #f8f9fa;
}

.order-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 2vw;
}

.order-id {
	font-size: 3.5vw;
	color: #666;
	font-weight: 500;
}

.order-status {
	font-size: 3vw;
	color: #52c41a;
	padding: 1vw 2vw;
	border: 1px solid #52c41a;
	border-radius: 1vw;
}

.order-content {
	margin-bottom: 2vw;
}

.business-info {
	display: flex;
	align-items: center;
	margin-bottom: 1vw;
	font-size: 3.5vw;
	color: #333;
}

.business-info i {
	margin-right: 2vw;
	color: #0097ff;
}

.order-amount {
	font-size: 3.5vw;
	color: #666;
}

.order-time {
	font-size: 3vw;
	color: #999;
	margin-bottom: 2vw;
}

.view-order {
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 3.5vw;
	color: #0097ff;
}

.view-order i {
	font-size: 3.5vw;
}

/* 解冻记录 */
.unfreeze-record {
	background-color: #fff;
	margin: 3vw;
	border-radius: 2vw;
	padding: 4vw;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.unfreeze-record h3 {
	margin: 0 0 3vw 0;
	font-size: 4vw;
	color: #333;
	font-weight: 500;
}

.record-info {
	background-color: #f0f8ff;
	border: 1px solid #0097ff;
	border-radius: 1vw;
	padding: 3vw;
}

.record-item {
	display: flex;
	align-items: center;
	margin-bottom: 2vw;
	font-size: 3.5vw;
	color: #0097ff;
}

.record-item:last-child {
	margin-bottom: 0;
}

.record-item i {
	margin-right: 2vw;
	font-size: 4vw;
}

/* 操作按钮 */
.action-buttons {
	display: flex;
	flex-direction: column;
	gap: 2vw;
	margin: 3vw;
}

.action-buttons button {
	padding: 3vw;
	border: none;
	border-radius: 2vw;
	font-size: 4vw;
	cursor: pointer;
	transition: all 0.3s;
}

.back-btn {
	background-color: #f5f5f5;
	color: #666;
}

.back-btn:hover {
	background-color: #e9ecef;
}

.confirm-btn {
	background-color: #0097ff;
	color: #fff;
}

.confirm-btn:hover:not(:disabled) {
	background-color: #007acc;
}

.confirm-btn:disabled {
	background-color: #ccc;
	cursor: not-allowed;
}

/* 加载和错误状态 */
.loading {
	text-align: center;
	padding: 6vw;
	color: #666;
	font-size: 4vw;
}

.error-msg {
	background-color: #fff;
	margin: 3vw;
	border-radius: 2vw;
	padding: 4vw;
	text-align: center;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.error-msg p {
	margin: 0 0 3vw 0;
	color: #ff4d4f;
	font-size: 3.5vw;
}

.error-msg button {
	background-color: #0097ff;
	color: #fff;
	border: none;
	border-radius: 1vw;
	padding: 2vw 4vw;
	font-size: 3.5vw;
	cursor: pointer;
}

.error-msg button:hover {
	background-color: #007acc;
}
</style>
